﻿@import "./Site.scss";

.session {
    flex: none;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
    align-self: center;
    width: 450px;
    padding: 60px 50px;

    img {
        align-self: center;
        height: 75px;
    }

    .help-line {
        font-size: 12px;
        color: #9b9b9b;
    }

    .el-form-item {
        &.is-error {
            margin-bottom: 41px;

            .el-input__wrapper {
                box-shadow: none !important;
            }
        }

        .el-input-group__append {
            background-color: #fff;
        }

        .el-button {
            &.is-disabled {
                color: $--color-primary;
            }
        }
    }

    .el-form-item__error {
        background: #f56c6c;
        color: #fff;
        padding: 5px;
        margin-top: 10px;
        border-radius: 4px;
    }

    .el-form-item__content {
        line-height: 48px;
    }

    .el-input {
        input {
            border-color: #d8d8d8 !important;
            background: #fff;
        }
    }

    .el-input__wrapper {
        box-shadow: none;
        border: 1px solid $--background-color-base;
    }

    .el-input__inner {
        line-height: 48px;
        height: 48px;
        border-radius: 0px;
        color: #4a4a4a;
    }

    .register-form__phone-prefix {
        width: 85px;
    }

    .session-form__term {
        text-align: left;
        color: #4a4a4a;

        a {
            color: #00a8e9;
            transition: .5s;
            cursor: pointer;

            &:hover {
                color: #0096d0;
            }
        }
    }

    .register-form__footer {
        padding-top: 15px;
        display: flex;
        flex-direction: column;
    }

    .phone-prefix-select {
        min-width: 85px;

        .el-input__wrapper {
            box-shadow: none !important;
        }
    }

    .register-form__back-login {
        display: block;
        text-align: center;
        margin-top: 18px;
    }
}

.main-container {
    margin: 60px auto 100px auto;
}

.h-tabs {
    .el-tabs__nav {
        display: flex;
        width: 100%;

        .el-tabs__item {
            text-align: center;
            flex: 1;
            font-size: 16px;
            color: silver;

            &.is-active {
                color: #4a4a4a;
            }
        }
    }

    .el-tabs__nav-wrap:after {
        background: transparent;
    }
}

.el-input-group--prepend {
    .el-input-group__prepend {
        background: #fff;
        border: 1px solid $--background-color-base;
        border-right: none;
        box-shadow: none;

        input {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            background: transparent;
            border: none;
        }


        .el-select {
            .el-input {
                &.is-focus {
                    .el-input__wrapper {
                        box-shadow: none !important;
                    }
                }
            }

            .el-input__inner {
                color: inherit;
            }

            .el-input__wrapper {
                padding: 0 15px;
            }

            &:hover {
                .el-input__wrapper {
                    box-shadow: none !important;
                }
            }
        }
    }
}

.el-select__popper {
    transform: translateY(-5px);

    .el-popper__arrow {
        display: none;
    }
}
